<template>
  <div class="px-2.5 lg:px-5 pb-2.5">
    <SkipHydration>
      <div class="lg:flex lg:items-start lg:justify-between">
        <!--        1-->
        <div class="lg:mt-8 lg:w-[35%] lg:rounded-2xl lg:bg-[#2a3032]">
          <!--        title-->
          <div class="overflow-hidden px-2.5 lg:mt-8">
            <div class="my-8 mb-8 text-base font-[500] leading-[1.4] lg:hidden">
              <h2>{{ $mt('Reviews about') }} {{ curGoodsDetail.name }}</h2>
              <span class="block text-sm">{{ curGoodsDetail.areaCode }}</span>
            </div>
            <nuxt-link
              external
              :to="$localePath(`/goods/${curGoodsDetail.urlName || curGoodsDetail.id}`)"
              class="mb-5 flex items-center border-b border-[#353b3c] pb-6">
              <div class="mr-5 mb-3 w-16 h-16 lg:ml-3 rounded-sm">
                <y-image :alt="curGoodsDetail.name" :src="$withPicOrigin(curGoodsDetail.smallIcon)" width="60px" />
              </div>
              <div>
                <h2 class="mb-1 lg:text-sm lg:font-[600]">{{ curGoodsDetail.name }}</h2>
                <h3 class="text-white2">{{ curGoodsDetail.areaCode }}</h3>
                <div class="mt-3 flex items-center justify-center rounded w-fit text-xs bg-[#d94a55] px-2 py-0.5">
                  {{ $mt('BUY NOW') }}
                </div>
              </div>
            </nuxt-link>
          </div>
          <!-- info-->
          <div class="mb-5 flex items-center justify-between px-5">
            <div class="flex flex-col justify-center items-center">
              <p class="text-2xl font-mono font-bold mb-2">{{ totalReviewsInfo.totalReviews }}</p>
              <p class="text-[#8c8d8e]">{{ $mt('Total Reviews') }}</p>
            </div>
            <div class="flex flex-col items-center">
              <p class="text-2xl font-mono font-bold mb-2">{{ totalReviewsInfo.avgReviews }}</p>
              <p class="text-[#8c8d8e]">{{ $mt('Avg Ratings') }}</p>
            </div>
          </div>
        </div>

        <!--        2-->
        <div class="overflow-hidden lg:w-[62%]">
          <h1 class="my-8 hidden text-base lg:text-2xl font-[500] leading-[1.4] lg:block">
            {{ $mt('Reviews about') }} {{ curGoodsDetail.name }}
          </h1>
          <div class="w-full text-xs text-white lg:flex lg:flex-wrap lg:justify-between lg:items-center">
            <div
              v-if="reviewsList.length"
              class="mb-5 w-full rounded-xl bg-[#23282a] p-5 lg:mr-4 lg:w-[46%] lg:px-3.5 lg:pb-4 lg:pt-3.5"
              v-for="(item, index) in reviewsList"
              :key="index">
              <div class="flex mb-2">
                <img
                  class="mr-3 h-9 w-9 rounded-[50%] lg:mr-4"
                  :src="useAsset('avatar')"
                  alt="customer avatar"
                  width="36px"
                  height="36px" />
                <div>
                  <p>{{ item.userName }}</p>
                  <van-rate class="my-2" :model-value="item.rating" color="#02bbff" size="12px" />
                  <p class="text-[#c8c9ca]">{{ item.comment }}</p>
                </div>
              </div>
              <!-- <p class="text-2.5 text-right text-[#929495] whitespace-nowrap">{{ item.createdAt }}</p> -->
            </div>
            <common-empty v-else class="ml-0 mt-10" />
          </div>

          <div
            v-if="reviewsInfo.totalElements > 10 && reviewsList.length !== reviewsInfo.totalElements"
            @click="next"
            class="flex lg:mt-8 cursor-pointer flex-col items-center justify-between">
            <p class="mb-1">{{ loadingRef ? $mt('Loading') : $mt('View More') }}</p>
            <van-icon name="arrow-down" color="#8c8d8e" size="18px" />
          </div>
        </div>
      </div>
      <!-- 3 相关商品和评价 -->
      <h3 v-if="reviewsRelatedGoods.length" class="text-base mb-4 lg:mb-6 mt-4 lg:mt-6 lg:text-2xl font-medium">
        {{ $mt('Related Products') }}
      </h3>
      <div class="grid grid-cols-1 lg:grid-cols-4 lg:gap-x-6">
        <div class="relative rounded-xl mb-16" v-for="(item, index) in reviewsRelatedGoods">
          <nuxt-link
            external
            :to="$localePath(`/goods/${item.urlName || item.id}`)"
            class="flex cursor-pointer items-center relative z-50 bg-[#7f4f7f] w-full h-full py-3 px-4 rounded-xl"
            :style="{ backgroundColor: colorBgList[index % colorBgList.length] }">
            <YImage
              eager
              :src="$withPicOrigin(item.smallIcon)"
              :alt="`${$mt('how to recharge')} ${item.name}`"
              height="100"
              width="100"
              class="trans shrink-0 mr-2 object-cover bg-[rgba(255,255,255,0.2)] rounded-xl h-16 w-16 lg:w-20 lg:h-20 cursor-pointer" />
            <div>
              <div class="mb-2 text-sm font-medium">{{ item.name }}</div>
              <div class="text-[#d7d8dd] text-xs">{{ item.areaCode }}</div>
            </div>
          </nuxt-link>
          <div class="related-item flex items-center justify-end px-4 py-2">
            <nuxt-link
              external
              :to="$localePath(`/reviews/${item.urlName}`)"
              class="bg-[#9acd32] hover:text-white cursor-pointer text-[#23292b] mt-3 mr-5 rounded-3xl py-0.5 h-6 w-16 text-center font-bold flex items-center justify-center">
              {{ $mt('Reviews') }}
            </nuxt-link>
            <nuxt-link
              external
              :to="$localePath(`/goods/${item.urlName || item.id}`)"
              class="bg-[#9acd32] hover:text-white cursor-pointer text-[#23292b] mt-3 rounded-3xl py-0.5 h-6 w-16 text-center font-bold flex items-center justify-center">
              {{ $mt('Buy Now') }}
            </nuxt-link>
          </div>
        </div>
      </div>
      <!-- 4 常见问题 -->
      <DetailCommon class="mt-4" :title="`${$mt('What you should know about recharge')} ${curGoodsDetail.name}`">
        <GoodsReviewsFAQ />
      </DetailCommon>
    </SkipHydration>
  </div>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'
import { useGoodsStore } from '~/store/goods'
import { useOffsetPagination } from '@vueuse/core'
import CommonEmpty from '~/components/basis/CommonEmpty.vue'
import { useGoodsReviewSeo } from '~/composables/useTdk'
import GoodsReviewsFAQ from '~/components/detail/GoodsReviewsFAQ.vue'
import DetailCommon from '~/components/basis/DetailCommon.vue'

const reviewsList = ref([])
const goodsStore = useGoodsStore()
const goodsId = ref()
const routeParams = useRoute().params
const colorBgList = ref([
  '#464c64',
  '#8b7a5e',
  '#9a7888',
  '#ef9690',
  '#cd6b9e',
  '#336fa1',
  '#36595b',
  '#3b3734',
  '#595ba8',
])
const { data } = await useLazyAsyncData(async () => {
  const isGoodsUrlName = isNaN(+routeParams.goodsId)
  if (isGoodsUrlName) return goodsStore.goodsUrlName2GoodsId(routeParams.goodsId)
  return +routeParams.goodsId
})
watchImmediate(data, () => (goodsId.value = data.value))
goodsStore.setGoodsId(goodsId.value)
const { curGoodsDetail, reviewsInfo, totalReviewsInfo, reviewsRelatedGoods } = storeToRefs(goodsStore)

const { currentPage, currentPageSize, next } = useOffsetPagination({
  page: 1,
  pageSize: 10,
  onPageChange: fetchData,
})

// 商品id
await useLazyAsyncData(async () => {
  await Promise.all([
    goodsStore.fetchRelatedGoods(goodsId.value),
    goodsStore.initGoodsSkuListByGoodsId(),
    goodsStore.getTotalReviewsInfo(goodsId.value),
    goodsStore.fetchReviewsList(currentPage.value, currentPageSize.value, goodsId.value),
  ])
  return 1
})
const { withLoadingToastRef, loadingRef } = useRequestLoading()
useGoodsReviewSeo({ curGoodsData: curGoodsDetail })
watchImmediate(reviewsInfo, (newVal) => {
  reviewsList.value = [...reviewsList.value, ...reviewsInfo.value?.data]
})

function fetchData({ currentPage, currentPageSize }: any) {
  goodsStore.fetchReviewsList(currentPage, currentPageSize, goodsId.value)
}

withLoadingToastRef()
</script>

<style lang="scss">
.related-item {
  width: 100%;
  height: 55px;
  background-color: #2a3032;
  position: absolute;
  bottom: -45px;
  left: 0;
  border-radius: 0 0 12px 12px;
  z-index: 10;
}
@keyframes scale-big {
  to {
    transform: scale3d(1.05, 1.05, 1.05);
  }
}
.trans {
  &:hover {
    animation: scale-big 0.3s forwards;
  }
}
</style>
